<template>
  <el-container class="main">
    <el-main>
      <el-row :gutter="20" >
        <el-col :span="20" :offset="2">
          <div class="cardDiv">
            <el-card class="box-card">
              <div class="block">
                <el-carousel height="500px">
                  <el-carousel-item v-for="img in imgs" :key="img">
                    <img :src="img" class="alignCenter"/>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-for="module in modules" :key="module.tag">
          <div class="cardDiv">
            <el-card class="box-card">
              <el-table :data="module.tableData" max-height="500px" height="500px"
                        @row-click="rowClick" style="width: 100%">
                <el-table-column prop="title" :label="module.name" :show-overflow-tooltip="true">
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {PostService} from '@/service/api'

export default {
  data () {
    return {
      activeIndex: 'home',
      imgs: ['static/img/carousel1.jpg', 'static/img/carousel2.jpg', 'static/img/carousel3.jpg'],
      modules: [
        {name: '实验室新闻', tag: 'sysxw', tableData: []},
        {name: '科研成果', tag: 'kycg', tableData: []},
        {name: '技术杂谈', tag: 'jszt', tableData: []}
      ]
    }
  },
  mounted: function () {
    for (let module of this.modules) {
      this.getTableData(module)
    }
  },
  methods: {
    rowClick: function (row, event, column) {
      this.$router.push({path: '/post/view/' + row.id})
      // console.log(row)
    },
    getTableData: function (module) {
      PostService.page(1, 10, module.tag)
        .then(res => {
          module.tableData = res.posts
        })
    }
  }
}
</script>

<style scoped>
  /*居中*/
  .alignCenter {
    clear: both;
    display: block;
    margin:auto;
    width: 100%;
    height: 100%;
  }
  .cardDiv {
    margin-bottom: 80px;
    height: 500px;
  }
</style>
